<template>
  <div class="DiseaseCodingMapping_10">
    <div class="pubBig standard">
      <div class="h0 dd">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px':'top: 100px'"
          v-loading="isYingShe"
        >
          <el-row
            :gutter="18"
            style="margin-left: -9px;margin-right: 0;"
          >
            <el-col :span="9">
              <!-- 左侧卡片开始 -->
              <el-card class="box-card">
                <div
                  slot="header"
                  class="clearfix"
                >
                  <span>标准代码</span>
                </div>
                <div style="overflow: auto;">
                  <el-button
                    size="mini"
                    @click="status=99,getTableData()"
                    :type="status == 99?'primary':''"
                  >全部</el-button>
                  <el-button
                    size="mini"
                    @click="status=0,getTableData()"
                    :type="status == 0?'primary':''"
                  >未映射</el-button>
                  <el-button
                    size="mini"
                    @click="status=1,getTableData()"
                    :type="status == 1?'primary':''"
                  >已映射</el-button>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:200px;margin-left:15px"
                    v-model="keyword"
                    placeholder="请输入编码/名称查询"
                  ></el-input>
                  <el-button
                    style="margin-left:10px"
                    icon="el-icon-search"
                    size="mini"
                    @click="page.page=1,getTableData()"
                  ></el-button>
                  <el-table
                    :data="tableData"
                    style="width: 100%;margin-top:10px"
                    v-loading="isLoading_a"
                    @row-click="table_left_click"
                    height="675px"
                  >
                    <el-table-column
                      prop="Code"
                      label="编码"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="Name"
                      label="名称"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="FileName"
                      label="手术操作类别"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="Version"
                      label="版本号"
                      width="120"
                    >
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      fixed="right"
                    >
                      <template slot-scope="scope">
                        <el-button
                          icon="el-icon-right"
                          style="color:#000"
                          type="text"
                        ></el-button>
                        <i
                          style="color:blue;margin-left:10px;color:#000"
                          :class="scope.row.IsMap == 0 ? 'el-icon-message-solid' : ''"
                        ></i>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="text-align:center">
                    <el-pagination
                      layout="prev, pager, next"
                      :total="TotalCount"
                      :page-size="page.limit"
                      @current-change="pag_change_a"
                      :current-page="page.page"
                    >
                    </el-pagination>
                  </div>

                </div>
              </el-card>

              <!-- 左侧卡片结束 -->

            </el-col>
            <el-col :span="8">
              <!-- 中间卡片开始 -->
              <el-card class="box-card">
                <div
                  slot="header"
                  class="clearfix"
                >
                  <span>数据映射</span>
                </div>
                <template>
                  <div
                    style="height:50%"
                    class="YYU"
                  >
                    <div>
                      <el-row style="margin-bottom:5px">
                        <el-col :span="24">
                          <el-button
                            size="small"
                            @click="add"
                            class="auto"
                          >手动映射</el-button>
                          <el-button
                            size="small"
                            @click="add_b('Value')"
                            class="auto"
                          >自动映射(值)</el-button>
                          <el-button
                            size="small"
                            @click="add_b('Code')"
                            class="auto"
                          >自动映射(代码)</el-button>
                        </el-col>

                      </el-row>
                    </div>
                    <el-table
                      :data="list_left"
                      style="width: 45%;height:90%;overflow-y: auto;float: left"
                    >
                      <el-table-column
                        type="index"
                        label="序号"
                        width="48"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Code"
                        label="ICD_10编码"
                      >
                      </el-table-column>
                      <el-table-column width="48">
                        <template slot-scope="scope">
                          <el-button
                            icon="el-icon-delete"
                            type="text"
                            style="color:#000"
                            @click="list_left_del(scope.row)"
                          ></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <!-- ------------------- -->
                    <el-table
                      :data="list_right"
                      style="width: 45%;height:90%;overflow-y: auto;float: right"
                    >
                      <el-table-column
                        type="index"
                        label="序号"
                        width="48"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Code"
                        label="院内编码"
                      >
                      </el-table-column>
                      <el-table-column width="48">
                        <template slot-scope="scope">
                          <el-button
                            icon="el-icon-delete"
                            type="text"
                            style="color:#000"
                            @click="list_right_del(scope.row)"
                          ></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style="height:47%;position: relative;">
                    <el-button
                      size="mini"
                      title="仅供当前页面"
                      @click="del_list"
                      style="margin:5px"
                    >批量删除</el-button>
                    <el-table
                      :data="tableData_right"
                      style="width: 100%"
                      v-loading="isYingShe"
                      @selection-change="selection_change"
                      height="275px"
                    >
                      <el-table-column type="selection">
                      </el-table-column>
                      <el-table-column
                        prop="PCode"
                        label="ICD_10编码"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="TCode"
                        label="院内编码"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="TName"
                        label="院内编码名称"
                      >
                      </el-table-column>
                      <el-table-column
                        label="操作"
                        fixed="right"
                      >
                        <template slot-scope="scope">
                          <el-button
                            size="small"
                            icon="el-icon-delete"
                            @click="del(scope.row)"
                          ></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div
                      class="block"
                      style="text-align:center"
                    >
                      <el-pagination
                        layout="prev, pager, next"
                        :total="TotalCount_b"
                        :page-size="limit_b"
                        @current-change="pag_change_b"
                      >
                      </el-pagination>
                    </div>
                  </div>
                </template>
              </el-card>
              <!-- 中间卡片结束 -->
            </el-col>

            <el-col :span="7">
              <!-- 右侧卡片开始 -->
              <el-card class="box-card">
                <div
                  slot="header"
                  class="clearfix"
                >
                  <span>院内ICD编码</span>
                </div>
                <el-input
                  size="mini"
                  style="display:inline-block;width:200px;"
                  v-model="keyword_2"
                  placeholder="请输入编码/名称查询"
                ></el-input>
                <el-button
                  style="margin-left:10px"
                  icon="el-icon-search"
                  size="mini"
                  @click="page_c=1,getTable_auto_b()"
                ></el-button>
                <template>
                  <el-table
                    :data="table_auto_b"
                    style="width: 100%;margin-top:10px"
                    @row-click="table_right_click"
                    height="670px"
                  >
                    <el-table-column
                      label="操作"
                      width="52"
                    >
                      <template slot-scope="scope">
                        <el-button
                          icon="el-icon-back"
                          style="color:#000"
                          type="text"
                        ></el-button>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="Name"
                      label="字段名"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="FileName"
                      label="数据类型"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="Code"
                      label="编码"
                    >
                    </el-table-column>
                  </el-table>
                </template>
                <div style="text-align:center">
                  <el-pagination
                    layout="prev, pager, next"
                    :total="TotalCount_c"
                    :page-size="limit_c"
                    @current-change="pag_change_c"
                    :current-page="page_c"
                  >
                  </el-pagination>
                </div>
              </el-card>
              <!-- 右侧卡片结束 -->
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: [],
      defaultProps: {
        children: 'Child',
        label: 'Name'
      },
      isLoading: false,
      isLoading_a: false,
      tableData: [],
      node_items: {},
      page: {
        page: 1,
        limit: 13
      },
      options: [],
      options_value: '',
      table_auto_a: [],
      table_auto_b: [],
      tableData_right: [],
      list_num: [],
      changeSelectStyle: -1,
      tip_val: '',
      list_left: [],
      list_right: [],
      left_num: 1,
      right_num: 1,
      ThirdExId: null,
      TotalCount: 1,
      TotalCount_b: 1,
      limit_b: 5,
      page_b: 1,
      TotalCount_c: 1,
      limit_c: 15,
      page_c: 1,
      isYingShe: false,
      status: 99,
      keyword: '',
      keyword_2: '',
      isSelection_change: [],
    };
  },
  methods: {

    getTableData () { // 获取标准代码表格数据
      this.isLoading_a = true
      this.$post("/ICDManage/List?category=ICD-10 " + "&page=" + this.page.page + "&limit=" + this.page.limit + "&status=" + this.status + "&keyword=" + this.keyword).then(res => {
        if (res.code == 0) {
          console.log(res.data.list);
          this.tableData = res.data.list
          this.TotalCount = res.data.TotalCount
          this.isLoading_a = false
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.log(err);
        this.$message.error('操作失败，出现错误');
      })
    },

    getOptions () {
      this.$get("ThirdMange/List").then(res => {
        if (res.code == 0) {
          this.options = res.data
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      })
    },

    getTable_auto (val) {
      this.table_auto_b = []
      this.$post("AssetDict/MapThirdTable?tcode=" + val).then(res => {
        if (res.code == 0) {
          this.changeSelectStyle = -1;
          this.table_auto_a = res.data
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.log(err);
        this.$message.error('操作失败，出现错误');
      })
    },

    getTable_auto_b () { // 获取院内的ICD编码表格数据
      this.$get("/ICDManage/Hospital/ICD?fileType=ICD-10" + "&page=" + this.page_c + "&limit=" + this.limit_c + "&keyword=" + this.keyword_2).then(res => {
        if (res.code == 0) {
          console.log(res.data);
          this.TotalCount_c = res.data.TotalCount
          this.table_auto_b = res.data.list
          this.tip_val = res.data.list[0].TableName
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.log(err);
        // this.$message.error('操作失败，出现错误');
      })
    },

    table_left_click (val) {// 标准代码点击传参事件
      console.log('传递参数左');
      console.log(val);
      let item = val
      item.index = this.left_num
      this.list_left.push(item)
      this.left_num += 1
    },

    table_right_click (val) {// 院内的ICD编码点击传参事件
      console.log('传递参数右');
      console.log(val);
      let item = val
      item.index = this.right_num
      this.list_right.push(item)
      this.right_num += 1
    },

    handleSelectionChange (val) {
      this.list_num = val
    },

    getTableData_right () {// 获取数据映射已关联表格
      this.$post("/ICDManage/MapList/ICD10?" + "page=" + this.page_b + "&limit=" + this.limit_b).then(res => {
        if (res.code == 0) {
          this.tableData_right = res.data.list
          console.log(res.data);
          this.TotalCount_b = res.data.TotalCount
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.log(err);
        this.$message.error('操作失败，出现错误');
      })
    },

    list_left_del (val) { //数据映射标准代码删除事件
      console.log('传递参数左删除');
      console.log(val);
      var index = null;
      for (var i in this.list_left) {
        if (this.list_left[i].index == val.index) {
          index = i;
        }
      }
      console.log(index);
      this.list_left.splice(index, 1);

    },

    list_right_del (val) { // 数据映射院内ICD编码删除事件
      console.log('传递参数右删除');
      console.log(val);
      var index = null;
      for (var i in this.list_right) {
        if (this.list_right[i].index == val.index) {
          index = i;
        }
      }
      console.log(index);
      this.list_right.splice(index, 1);
    },

    add () { // 手动映射按钮事件
      console.log(this.list_left, this.list_right);
      var arr = []
      var arr_a = []
      for (var i in this.list_left) {
        arr.push(this.list_left[i].Code)
      }
      for (var i in this.list_right) {
        arr_a.push(this.list_right[i].Code)
      }
      let body = {
        fileType: 'ICD-10',
        pCodes: arr,
        tCodes: arr_a
      }
      console.log('传递参数');
      console.log(body);
      this.$post("/ICDManage/HandMap", body).then(res => {
        if (res.code == 0) {
          console.log(res);
          this.getTableData_right()
          this.getTableData()
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.list_left = []
          this.list_right = []
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.log(err);
        this.$message.error('操作失败，出现错误');
      })
    },

    del (val) { // 数据映射表格删除事件
      console.log('传递参数');
      console.log(val);
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(_ => {
          this.$post("/ICDManage/MapDelete?fileType=ICD-10&code=" + val.PCode).then(res => {
            if (res.code == 0) {

              this.getTableData_right()
              this.getTableData()
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            } else if (res.code == -1) {
              this.$message.error(res.msg);
            }
          }).catch(err => {
            console.log(err);
            this.$message.error('操作失败，出现错误');
          })

        })
        .catch(_ => { });

    },

    pag_change_a (val) { // 标准代码表格页码切换事件
      this.page.page = val
      this.getTableData()
    },

    pag_change_b (val) { // 数据映射表格页码切换事件
      this.page_b = val
      this.getTableData_right()
    },

    pag_change_c (val) { // 院内的ICD编码表格页码切换事件
      this.page_c = val
      // this.$post("AssetDict/MapThirdField?thirdId=" + this.ThirdExId + "&page=" + this.page_c + "&limit=" + this.limit_c).then(res => {
      this.$get("/ICDManage/Hospital/ICD?fileType=" + "ICD-10" + "&page=" + this.page_c + "&limit=" + this.limit_c).then(res => {
        if (res.code == 0) {
          this.table_auto_b = res.data.list
          this.TotalCount_c = res.data.TotalCount
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.log(err);
        this.$message.error('操作失败，出现错误');
      })
    },

    add_b (val) { // 自动映射按钮操作事件
      this.isYingShe = true
      if (val == 'Code') {
        this.$post("/ICDManage/AutoMap?fileType=ICD-10&mapType=Code").then(res => {
          if (res.code == 0) {
            console.log(res);
            this.getTableData_right()
            this.isYingShe = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          } else if (res.code == -1) {
            this.$message.error(res.msg);
            this.isYingShe = false
          }
        }).catch(err => {
          console.log(err);
          this.$message.error(res.msg);
          this.isYingShe = false
        })
      } else if (val == 'Value') {
        this.$post("/ICDManage/AutoMap?fileType=ICD-10&mapType=Value").then(res => {
          if (res.code == 0) {
            console.log(res);
            this.getTableData_right()
            this.isYingShe = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          } else if (res.code == -1) {
            this.$message.error(res.msg);
            this.isYingShe = false
          }
        }).catch(err => {
          console.log(err);
          this.$message.error(res.msg);
          this.isYingShe = false
        })
      }
    },
    selection_change (val) { // 多选删除
      let arr = []
      for (var i in val) {
        arr.push(val[i].PCode)
      }
      // console.log(arr);
      this.isSelection_change = arr
      // console.log(this.isSelection_change);
    },
    del_list () {// 批量删除事件
      var body = {
        fileType: 'ICD-10',
        codes: this.isSelection_change
      }
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(_ => {
          this.$post("/ICDManage/MapBatchDelete", body).then(res => {
            if (res.code == 0) {

              this.getTableData_right()
              this.getTableData()
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            } else if (res.code == -1) {
              this.$message.error(res.msg);
            }
          }).catch(err => {
            console.log(err);
            this.$message.error('操作失败，出现错误');
          })

        })
        .catch(_ => { });
    }

  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.getTableData()
    this.getTableData_right()
    this.getTable_auto_b()
  }
};
</script>
<style  lang="scss">
.DiseaseCodingMapping_10 {
  .dLeftMain {
    position: absolute;
    width: 370px;
    top: 45px;
    left: 0;
    bottom: 20px;
    border-right: 1px solid #ddd;
    overflow: auto;
    padding-top: 8px;
  }

  .dRightMain {
    width: 960px;
    height: 855px;
    margin-left: 300px;
    padding: 20px 0 0 20px;

    p {
      clear: noth;
      height: 32px;
      margin-bottom: 10px;

      .form-control {
        width: 200px;
      }

      span {
        display: block;
        float: left;
        width: 130px;
        line-height: 32px;

        b {
          color: red;
          position: relative;
          top: 2px;
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }
  .a {
    float: left;
    width: 30%;
    height: 95%;
  }
  .b {
    float: right;
    width: 68%;
    height: 100%;
    overflow: auto;
  }
  .c {
    background-color: #ccc;
  }
  .el-card {
    height: 845px;
  }
  .el-card__body {
    height: 98%;
  }
  .el-card__header {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
  }

  .tip_val {
    font-weight: 700;
    font-size: 18px;
  }
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: auto;
    height: 100%;
  }
  .el-table__body,
  .el-table__footer,
  .el-table__header {
    height: 0;
  }
  .el-col-24 {
    margin: 0 auto;
    text-align: center;
  }

  .tree {
    overflow-x: auto;
  }
  .Ll {
    border-right: 1px solid #ccc;
    padding-right: 5px;
    margin-left: 5px;
  }
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .el-tree > .el-tree-node {
    min-width: 100%;
    display: inline-block;
  }
  .num {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
  }
  .YYU {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }
  .el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
    overflow: scroll !important;
  }
}
</style>
